<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box king-layout1-main clearfix">
        <!-- 左边 start -->
        <div class="king-layout1-sidebar column" style="width:216px;">
            <nav style="min-width: auto; z-index: 0;" class="king-vertical-nav5 king-vertical-nav5-info  ">
                <ul class="sidebar">
                    <li class="sidebar-main"> <a href="javascript:;">                    首页 <span class="menu-icon glyphicon glyphicon-home"></span>                </a> </li>
                    <li class="sidebar-title">
                        <a style="color: #333">
                            <span>综合分类</span>
                        </a>
                        <ul class="sidebar">
                            <li class="sidebar-item active"> <a href="javascript:;">数据报表 <span class="menu-icon fa fa-gear"></span></a> </li>
                            <li class="sidebar-item"> <a href="javascript:;">安全审计 <span class="menu-icon fa fa-wrench"></span></a> </li>
                            <li class="sidebar-item"> <a href="javascript:;">单据事务 <span class="menu-icon fa fa-tasks"></span></a> </li>
                        </ul>
                    </li>
                    <li class="sidebar-title">
                        <a style="color: #333">
                            <span>系统管理</span>
                        </a>
                        <ul class="sidebar">
                            <li class="sidebar-item"> <a href="javascript:;">账户设置 <span class="menu-icon fa fa-ellipsis-h"></span></a> </li>
                            <li class="sidebar-item"> <a href="javascript:;">密码修改 <span class="menu-icon fa fa-tasks"></span></a> </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- 左边 end -->
        <!-- content start -->
        <div class="king-content-wrap">
            <div class="king-layout1-content" style="margin-left: 216px;">
                <!-- <div class="king-page-topbar pl20 pr20 {{ marginStyle }}"> -->
                <div class="king-page-topbar mr10">
                    <h3 class="king-topbar-title mb0">
                        <span>Breadcrumb</span>
                    </h3>
                    <ul class="breadcrumb king-breadcrumb pl0 bg-transparent">
                        <li><a href="javascript:void(0);">首页</a></li>
                        <li><a href="javascript:void(0);">组件</a></li>
                        <li class="active"><a href="javascript:void(0);">面包屑导航</a></li>
                    </ul>
                </div>
                <!-- 面板 编辑 开始 -->
                <!-- 面板 编辑 结束 -->
                <div class="king-widget2 king-widget-info m0">
                    <div class="king-widget2-content p30">
                        <div class="row no-space">
                            <div class="col-sm-6">
                                <div class="king-counter king-counter-lg">
                                    <span class="king-counter-number">286</span>
                                    <div class="king-counter-label text-uppercase">Online Players</div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="king-counter king-counter-lg">
                                    <span class="king-counter-number">286</span>
                                    <div class="king-counter-label text-uppercase">Online Players</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 设置面板Start -->
                <!-- 设置面板End -->
                <div class="panel mb0 panel-box  ">
                    <div class="list-justified-container">
                        <ul class="list-justified text-center">
                            <li>
                                <p class="f24">679</p>
                                <p>粉丝</p>
                            </li>
                            <li>
                                <p class="f24">575</p>
                                <p>微博</p>
                            </li>
                            <li>
                                <p class="f24">23</p>
                                <p>关注</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 设置面板Start -->
                <!-- 设置面板End -->
                <ul class="king-timeline-simple  ">
                    <li class="info">
                        <div class=""> blue king 给你发了一封邮件
                            <span class="timeline-simple-date">2016-08-11 08:00</span>
                        </div>
                    </li>
                    <li class="primary">
                        <div class=""> blue king 给你发了一封邮件
                            <span class="timeline-simple-date">2016-05-11 10:00</span>
                        </div>
                    </li>
                    <li class="success">
                        <div class=""> blue king 给你发了一封邮件
                            <span class="timeline-simple-date">2016-08-12 18:00</span>
                        </div>
                    </li>
                    <li class="warning">
                        <div class=""> blue king 给你发了一封邮件
                            <span class="timeline-simple-date">2016-08-11 20:00</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- content end -->
    </div>
</body>

</html>